<script setup>
import { ref } from "vue";

// 清晰度
const quality = ref("FHD");
const qualityList = ref([
  {
    value: "SD",
    text: "标清",
  },
  {
    value: "HD",
    text: "高清",
  },
  {
    value: "FHD",
    text: "超清",
  },
]);

// 画面比例
const ratio = ref("9:16");
const ratioList = ref([
  {
    value: "9:16",
    text: "9:16",
  },
  {
    value: "3:4",
    text: "3:4",
  },
]);

// 是否静音
const isMute = ref(false);

// 自动聚焦
const autoFocus = ref(true);

// 美颜
const beauty = ref(0);

// 美白
const white = ref(0);

// 视频码率
const videoRate = ref(1500);

// 摄像头
const camera = ref("front");
const cameraList = ref([
  {
    value: "front",
    text: "前置",
  },
  {
    value: "back",
    text: "后置",
  },
]);

// 推流地址
const liveUrl = ref("");

// 是否静音
const changeIsMute = (e) => {
  isMute.value = e.detail.value;
};

// 自动聚集
const changeAutoFocus = (e) => {
  autoFocus.value = e.detail.value;
};

// 美颜
const changeBeauty = (e) => {
  beauty.value = e.detail.value;
};

// 美白
const changeWhite = (e) => {
  white.value = e.detail.value;
};

// 视频码率
const changeVideoRate = (e) => {
  videoRate.value = e.detail.value;
};

// 摄像头
const changeCamera = (e) => {
  camera.value = e.detail.value;
};

// 扫描推流地址
const scanLiveUrl = () => {
  uni.showModal({
    title: "提示",
    content: "仅支持扫描uni直播控制台生成的推流地址",
    confirmText: "继续",
    cancelText: "取消",
    success: (res) => {
      if (res.confirm) {
        uni.scanCode({
          onlyFromCamera: true,
          success: (res) => {
            if (res.result && /^rtmp:\/\//.test(res.result)) {
              liveUrl.value = decodeURIComponent(res.result);
            } else {
              uni.showToast({
                title: "请输入正确的推流地址；仅支持RTMP协议",
                icon: "none",
              });
            }
          },
          fail: (err) => {
            console.log(err);

            if (err.errMsg.includes("cancel")) {
              return;
            }

            uni.showModal({
              title: "扫码失败",
              content: err.errMsg || "未知错误",
              showCancel: false,
              confirmText: "知道了",
            });
          },
        });
      }
    },
  });
};

// 开始推流
const startLive = () => {
  // #ifdef H5
  uni.showToast({
    title: "Web不支持推流",
    icon: "none",
  });
  return;
  // #endif

  if (!liveUrl.value) {
    uni.showToast({
      title: "请输入推流地址",
      icon: "none",
    });
    return;
  }

  const params = {
    url: liveUrl.value,
    quality: quality.value,
    ratio: ratio.value,
    isMute: isMute.value,
    autoFocus: autoFocus.value,
    beauty: beauty.value,
    white: white.value,
    minVideoBitrate: 200,
    maxVideoBitrate: videoRate.value,
    camera: camera.value,
  };

  uni.navigateTo({
    url:
      "/pages/live-pusher/live-pusher?params=" +
      encodeURIComponent(JSON.stringify(params)),
  });
};
</script>

<template>
  <view class="container">
    <uni-list>
      <uni-list-item>
        <template #body>
          <view class="input-box">
            <input
              class="input"
              type="text"
              placeholder="请输入推流地址；仅支持RTMP协议"
              v-model="liveUrl"
            />
            <uni-icons
              type="scan"
              size="16"
              color="#999"
              @click="scanLiveUrl"
            />
          </view>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template #header>
          <view class="header-title">清晰度</view>
        </template>
        <template #footer>
          <uni-data-select
            v-model="quality"
            :clear="false"
            :localdata="qualityList"
          ></uni-data-select>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template #header>
          <view class="header-title">画面比例</view>
        </template>
        <template #footer>
          <uni-data-select
            v-model="ratio"
            :clear="false"
            :localdata="ratioList"
          ></uni-data-select>
        </template>
      </uni-list-item>
      <uni-list-item>
        <template #header>
          <view class="header-title">是否静音</view>
        </template>
        <template #footer>
          <switch :checked="isMute" @change="changeIsMute" />
        </template>
      </uni-list-item>
      <uni-list-item>
        <template #header>
          <view class="header-title">自动聚集</view>
        </template>
        <template #footer>
          <switch :checked="autoFocus" @change="changeAutoFocus" />
        </template>
      </uni-list-item>
      <uni-list-item title="美颜" note="取值范围 0-9（iOS为1） 0 关闭">
        <template #footer>
          <slider
            style="width: 140px; margin: 5px 0"
            :value="beauty"
            :min="0"
            :max="9"
            show-value
            :block-size="16"
            @change="changeBeauty"
          />
        </template>
      </uni-list-item>
      <uni-list-item title="美白" note="取值范围 0-9（iOS为1） 0 关闭">
        <template #footer>
          <slider
            style="width: 140px; margin: 5px 0"
            :value="white"
            :min="0"
            :max="9"
            show-value
            :block-size="16"
            @change="changeWhite"
          />
        </template>
      </uni-list-item>
      <uni-list-item title="视频码率" note="取值范围 200-5000 单位：kbps">
        <template #footer>
          <slider
            style="width: 140px; margin: 5px 0"
            :value="videoRate"
            :min="200"
            :max="5000"
            step="100"
            show-value
            :block-size="16"
            @change="changeVideoRate"
          />
        </template>
      </uni-list-item>

      <uni-list-item title="默认摄像头" note="仅微信小程序支持">
        <template #footer>
          <uni-data-select
            v-model="camera"
            :clear="false"
            :localdata="cameraList"
            @change="changeCamera"
          ></uni-data-select>
        </template>
      </uni-list-item>
    </uni-list>

    <button type="primary" class="save-btn" @click="startLive">开始推流</button>
  </view>
</template>

<style lang="less" scoped>
.container {
  padding-bottom: 100px;

  :deep(.uni-list-item__container) {
    overflow: visible;
  }
}

.input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;

  .input {
    flex: 1;
    font-size: 14px;
  }
}

.header-title {
  font-size: 14px;
  color: #3b4144;
  display: flex;
  align-items: center;
}

.save-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 40px;
  line-height: 40px;
  background-color: #007aff;
}
</style>
